import * as Spritejs from "spritejs";

let scene;
let layer;

function init(container) {
  scene = new Spritejs.Scene({
    // dom 元素
    container,
    // 宽度
    width: 3080,
    // 高度
    height: 800,
    // 模式
    mode: "stickyTop",
  });
  layer = scene.layer();

  return scene;
}

function addPath(options) {
  const line = new Spritejs.Polyline(
    Object.assign(
      {
        pos: [250, 50],
        points: [0, 0, 100, 100, 200, 0, 300, 100, 400, 0, 500, 100, 600, 0],
        strokeColor: "blue",
        lineWidth: 20,
      },
      options
    )
  );
  layer.append(line);
}

function addRing(options) {
  const ring = new Spritejs.Ring(
    Object.assign(
      {
        pos: [300, 300],
        innerRadius: 0,
        outerRadius: 21,
        fillColor: "blue",
      },
      options
    )
  );
  layer.append(ring);
}

function initAnmoin() {
  const robot = new Spritejs.Sprite(
    "https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png"
  );

  robot.attr({
    anchor: [0, 0.5],
    pos: [0, 0],
  });

  robot.animate(
    [
      { pos: [0, 0] },
      { pos: [0, 300] },
      { pos: [2700, 300] },
      { pos: [2700, 0] },
    ],
    {
      duration: 5000,
      iterations: Infinity,
      direction: "alternate",
    }
  );

  layer.append(robot);
}

const toolCanvas = { init, initAnmoin, addPath, addRing };

export default toolCanvas;
